
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>极速桌面启动器Vicinae - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>极速桌面启动器Vicinae - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Vicinae采用什么技术栈构建，这带来了哪些性能优势？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Vicinae采用C++和Qt构建的原生架构，避免了Electron开销，实现更低的延迟和内存使用，启动时间小于100ms。</div>
          </div>
          <div class="card-source">来源: 文档中「优势与特色」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">Vicinae的全文本文件索引功能可以处理多大规模的文件？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">支持数百万文件的全文本搜索，可通过根搜索或专用模块访问，便于在大型项目中定位代码或文档。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Vicinae如何保护用户的剪贴板历史数据安全？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">提供加密剪贴板历史功能，追踪并全文本搜索所有复制内容，通过加密存储确保隐私安全。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">兼容性</div>
          <div class="card-question">Vicinae与Raycast的兼容性如何？存在哪些限制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">兼容性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Vicinae提供Raycast兼容API，允许直接复用数千扩展，仅需最小修改。但某些Raycast扩展因API缺失或Linux不兼容而无法运行。</div>
          </div>
          <div class="card-source">来源: 文档中「优势与特色」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">成本</div>
          <div class="card-question">使用Vicinae需要支付费用吗？采用什么开源协议？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">成本</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Vicinae完全免费开源，采用MIT许可，无需注册或账号即可下载使用，无隐藏费用或高级版本。</div>
          </div>
          <div class="card-source">来源: 文档中「使用门槛与成本」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">环境</div>
          <div class="card-question">安装Vicinae需要什么开发环境？构建时间大约多长？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">环境</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要Qt 6+开发环境编译，Windows/Mac有预构建二进制简化过程，Linux用户需手动安装依赖。初次构建时间约10-20分钟。</div>
          </div>
          <div class="card-source">来源: 文档中「使用门槛与成本」和「上手指南」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">Vicinae的内联计算器有什么特点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">内置计算器支持历史记录和多后端，可处理复杂表达式，适合开发者快速验证公式而无需切换应用。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">使用场景</div>
          <div class="card-question">Vicinae如何帮助开发者提高代码搜索效率？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">使用场景</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">开发者可通过键盘热键召唤启动器，搜索数百万行代码文件中的特定函数，解决IDE索引慢的问题，直接跳转编辑器。</div>
          </div>
          <div class="card-source">来源: 文档中「使用场景」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">配置</div>
          <div class="card-question">Vicinae的默认热键是什么？如何进行自定义配置？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">配置</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">默认热键为Cmd+Space（Mac）或Super+Space（Linux）。可以编辑config.json添加主题（光暗模式），启用文件索引等自定义功能。</div>
          </div>
          <div class="card-source">来源: 文档中「上手指南」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">社区</div>
          <div class="card-question">如何参与Vicinae的社区贡献和获取支持？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">社区</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以加入Discord（https://discord.gg/rP4ecD42p7）报告问题或贡献扩展开发（React/TS），定期通过git pull获取更新。</div>
          </div>
          <div class="card-source">来源: 文档中「上手指南」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">限制</div>
          <div class="card-question">Vicinae存在哪些主要的功能限制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">限制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">无内置云同步，依赖本地配置，可能增加多设备迁移门槛；功能支持在早期环境（如旧Qt版本）可能不全；文档虽详尽但社区规模小。</div>
          </div>
          <div class="card-source">来源: 文档中「优势与特色」和「使用门槛与成本」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">目标用户</div>
          <div class="card-question">Vicinae的主要目标用户群体是谁？他们面临什么痛点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">目标用户</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">目标用户包括开发者、资深用户和注重效率的知识工作者。他们面临的痛点包括：Electron-based工具资源占用高导致启动延迟和内存压力；扩展生态移植到Linux或自定义环境时兼容性差；文件搜索和剪贴板历史等功能在多平台上不一致。</div>
          </div>
          <div class="card-source">来源: 文档开头介绍和「它能解决什么问题」部分</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
